{% extends 'admin/admin_mould.html' %}

{% block title %}
  Admin-home
{% endblock %}


{% block body %}
<!-- end cur -->
  <style>
    .search-box {
      padding: 10px 35px 10px 35px;
      height: 200px;
      width: auto;
      border: 1px solid #ddd;
      border-radius: 6px;
      margin-top: 15px;
      margin-bottom: 15px;
    }

    .search-ininle {
      margin-bottom: 5px;
      width: auto;
      height: 33%;

    }

    .bottom-border {
      border-bottom: 2px;
      border-bottom-style: dotted;
      border-bottom-color: #DDDDDD;
    }

    .search-inline-title {
      float: left;
      width: 10%;
      height: auto;
      text-align: center;
      line-height: 50px;
      font-size: 17px;
      font-weight: 300;
      font-family: 微软雅黑;
    }

    .search-inline-body {
      float: left;
      height: auto;
      width: 90%;
      line-height: 50px;
    }

    .display-inline {
      display: inline;
    }
    .dispaly-none {
      display: none;
    }
    .display-inline-block {
      display: inline-block;
    }

    .dispaly-none {
      display: none;
    }

    .mag-right-input {
      margin-right: 48px;
    }

    .mag-rilf {
      margin: 0 6px 0 -10px;
    }

    .radio-lable {
      margin: 0 8px 0 0;
    }

    .radio-none {
      display: none;
    }

    .radio-style {
      background-color: #fff;
      border: 1px solid rgba(0, 0, 0, 0.15);
      border-radius: 100%;
      display: inline-block;
      height: 16px;
      margin-top: -1px;
      vertical-align: middle;
      width: 16px;
      line-height: 1;
    }

    .radio-none:checked + .radio-style:after {
      background-color: #57ad68;
      border-radius: 100%;
      content: "";
      display: inline-block;
      height: 14px;
      width: 14px;
    }

    .keyworld-input {
      margin: 10px 0 10px 29px;
    }

    .mar-input-ra {
      margin: 10px 10px 10px 10px;
    }

    .suffix-text {
      font-size: 16px;
      font-family: 微软雅黑;
    }

    .mar-input-type {
      margin: 10px 10px 10px 60px;
    }

    .table-header-style {
      font-size: 16px;
      font-weight: 600;

    }

    .table-body-style {
      font-size: 15px;
    }
  </style>

  <!-- start search -->
  <div class="container">
    <div class="search-box" id="search-box" onchange="">
      <!-- 快速搜索 -->
      <div class="search-ininle bottom-border">
        <div class="search-inline-title">快速搜索:</div>
        <div class="search-inline-body">
          <ul>
            <li class="display-inline mag-rilf">
              <input id="fastSelect1" name="fastSelect" class="radio-none" value="1" type="radio"/>
              <span class="radio-style"></span>
              <label for="fastSelect1" class="radio-lable">纯数字</label>
            </li>
            <li class="display-inline mag-rilf">
              <input id="fastSelect2" name="fastSelect" class="radio-none" value="2" type="radio"/>
              <span class="radio-style"></span>
              <label for="fastSelect2" class="radio-lable">2位数字</label>
            </li>
            <li class="display-inline mag-rilf">
              <input id="fastSelect3" name="fastSelect" class="radio-none" value="3" type="radio"/>
              <span class="radio-style"></span>
              <label for="fastSelect3" class="radio-lable">3位数字</label>
            </li>
            <li class="display-inline mag-rilf">
              <input id="fastSelect4" name="fastSelect" class="radio-none" value="4" type="radio"/>
              <span class="radio-style"></span>
              <label for="fastSelect4" class="radio-lable">纯字母</label>
            </li>
            <li class="display-inline mag-rilf">
              <input id="fastSelect5" name="fastSelect" class="radio-none" value="5" type="radio"/>
              <span class="radio-style"></span>
              <label for="fastSelect5" class="radio-lable">2个字母</label>
            </li>
            <li class="display-inline mag-rilf">
              <input id="fastSelect6" name="fastSelect" class="radio-none" value="6" type="radio"/>
              <span class="radio-style"></span>
              <label for="fastSelect6" class="radio-lable">3个字母</label>
            </li>
            <li class="display-inline mag-rilf">
              <input id="fastSelect7" name="fastSelect" class="radio-none" value="7" type="radio"/>
              <span class="radio-style"></span>
              <label for="fastSelect7" class="radio-lable">单拼</label>
            </li>
            <li class="display-inline mag-rilf">
              <input id="fastSelect8" name="fastSelect" class="radio-none" value="8" type="radio"/>
              <span class="radio-style"></span>
              <label for="fastSelect8" class="radio-lable">双拼</label>
            </li>
            <li class="display-inline mag-rilf">
              <input id="fastSelect9" name="fastSelect" class="radio-none" value="9" type="radio"/>
              <span class="radio-style"></span>
              <label for="fastSelect9" class="radio-lable">三拼</label>
            </li>
            <li class="display-inline mag-rilf">
              <input id="fastSelect10" name="fastSelect" class="radio-none" value="10" type="radio"/>
              <span class="radio-style"></span>
              <label for="fastSelect10" class="radio-lable">杂米</label>
            </li>
            <li class="display-inline mag-rilf">
              <input id="fastSelect11" name="fastSelect" class="radio-none" value="11" type="radio"/>
              <span class="radio-style"></span>
              <label for="fastSelect11" class="radio-lable">二杂</label>
            </li>
            <li class="display-inline mag-rilf">
              <input id="fastSelect12" name="fastSelect" class="radio-none" value="12" type="radio"/>
              <span class="radio-style"></span>
              <label for="fastSelect12" class="radio-lable">三杂</label>
            </li>
            <li class="display-inline mag-rilf">
              <input id="fastSelect13" name="fastSelect" class="radio-none" value="13" type="radio"/>
              <span class="radio-style"></span>
              <label for="fastSelect13" class="radio-lable">中文</label>
            </li>
          </ul>
        </div>
      </div>
      <!-- 关键字 -->
      <div class="search-ininle bottom-border">
        <div class="search-inline-title">关键字筛选:</div>
        <div class="search-inline-body">
          <div style="width: 20%;" class="display-inline-block float-left mag-right-input">
            <input type="text" class="form-control keyworld-input" name="keyWord" placeholder="多个关键字使用逗号分割"/>
          </div>
          <div class="float-left display-inline-block mag-right-input">
            <input type="radio" id="startKeyWord" name="startEndKeyWord" value="start"
                   class="display-inline-block radio-none mar-input-ra"/>
            <span class="radio-style"></span>
            <label for="startKeyWord" class="radio-lable">开头</label>

            <input type="radio" id="endKeyWord" name="startEndKeyWord" value="end"
                   class="display-inline-block radio-none mar-input-ra">
            <span class="radio-style"></span>
            <label for="endKeyWord" class="radio-lable">结尾</label>
          </div>
          <div class="display-inline-block float-left" style="width: 50%">
            <div class="display-inline-block suffix-text">后缀:&ensp;&nbsp;</div>
            <div class="display-inline-block" style="width: 25%;">
              <select id="domainSuffix" name="suffix" class="form-control">
                <option value="no">-----</option>
                <option value="0">.com</option>
                <option value="1">.cn</option>
                <option value="2">.net</option>
                <option value="3">.xin</option>
                <option value="4">.top</option>
                <option value="5">.biz</option>
                <option value="6">.cc</option>
                <option value="7">.tv</option>
                <option value="8">.mobi</option>
                <option value="9">.org</option>
                <option value="10">.org.cn</option>
                <option value="11">.wang</option>
                <option value="12">.vip</option>
                <option value="13">.xyz</option>
                <option value="14">.club</option>
                <option value="15">.shop</option>
                <option value="16">.info</option>
                <option value="17">.ltd</option>
                <option value="18">.site</option>
                <option value="19">.online</option>
                <option value="20">.tech</option>
                <option value="21">.store</option>
                <option value="22">.group</option>
                <option value="23">.red</option>
                <option value="24">.kim</option>
                <option value="25">.pro</option>
                <option value="26">.name</option>
                <option value="27">.com.cn</option>
                <option value="28">.net.cn</option>
                <option value="29">.ai</option>
                <option value="30">.io</option>
              </select>
            </div>
          </div>
        </div>
      </div>
      <!-- 交易类型 -->
      <div class="search-ininle">
        <div class="search-inline-title">交易类型:</div>
        <div class="search-inline-body">
          <div style="margin-left: 30px;">
            <input type="radio" id="radioRegistered" name="buyType" value="0"
                   class="display-inline-block radio-none mar-input-type"/>
            <span class="radio-style"></span>
            <label for="radioRegistered" class="radio-lable">抢注</label>
            <input type="radio" id="radioPrice" name="buyType" value="1"
                   class="display-inline-block radio-none mar-input-type">
            <span class="radio-style"></span>
            <label for="radioPrice" class="radio-lable">一口价</label>
            <div class="pull-right">
              <input type="button" class="btn btn-primary" style="margin-right: 26px;" onclick="clearSearchBox();"
                     value="重置所有条件"/>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- end search -->
  <!-- start tables -->
  <div class="container search-next-table">
    <table class="table table-hover">
      <thead class="home-table-font">
      <tr class="table-header-style">
        <td>域名</td>
        <td>长度</td>
        <td>评分</td>
        <td>类型</td>
        <td>预定价格</td>
        <td>更多信息</td>
        <td>状态</td>
        <td>更多操作</td>
      </tr>
      </thead>
      <tbody class="table-body-style" id="tableBody">
      {% for key,value in domain_dic.items %}
        <tr>
          <td><a href="http://whois.stupig.com/?domain={{ key }}" target="_blank">{{ key }}</a></td>
          <td>{{ value.length }}</td>
          <td>{{ value.score }}</td>
          {% if value.type == '1' %}
            <td>一口价</td>
          {% elif value.type == '0' %}
            <td>竞价</td>
          {% else %}
            <td>待定</td>
          {% endif %}
          {% if value.price == '' %}
            <td>待定</td>
          {% else %}
            <td><span style="color: red;"> ￥</span>{{ value.price }}</td>
          {% endif %}
          <td>
            <a href="/detail-{{ value.id }}.html">更多信息</a>
          </td>
          {% if value.status == '1' %}
            <td>已出售</td>
          {% else %}
            <td>未出售</td>
          {% endif %}
          <td>
              <a href="/admin/modify?id={{ value.id }}">修改</a>
              <span>|</span>
              <!-- Button trigger modal -->
              <a type="button" class="btn-link" data-toggle="modal" onclick="delFunc({{ value.id }});" data-target="#DelModal">删除</a>
          </td>
        </tr>
      {% endfor %}
      </tbody>
    </table>
    <!-- start del domain modal-->
    <div class="modal fade" id="DelModal" tabindex="-1" role="dialog" aria-labelledby="DelModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                    aria-hidden="true">&times;</span></button>
            <h3 class="modal-title" id="DelModalLabel">删除确认</h3>
          </div>
          <div class="modal-body">
            <h3>确认删除此域名</h3>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <a href="/admin/delete?id={{ value.id }}" id="ydel" class="btn btn-primary">确认删除</a>
          </div>
        </div>
      </div>
    </div>
    <!-- end del domain modal-->
    <!-- start paging -->
    <nav aria-label="Page navigation" id="page" style="text-align: center;">
      <ul class="pagination control-label" id="PageUl">
        <li>
          <a href="/admin?p=1" aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
          </a>
        </li>
        {% for page in page_list %}
          {% if page == now_page %}
            <li class="active"><a href="/admin?p={{ page }}">{{ page }}</a></li>
          {% else %}
            <li><a href="/admin?p={{ page }}">{{ page }}</a></li>
          {% endif %}
        {% endfor %}
        <li>
          <a href="/admin?p={{ totle_page }}" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
          </a>
        </li>
      </ul>
    </nav>
    <!-- end paging -->
  </div>
  <!-- end tables -->
  <script lang="javascript" src="/static/js/jquery.min.js"></script>
  <script>
      function delFunc(id) {
          $("#ydel").attr('href', '/admin/delete?id=' + id);
      };
      function clearSearchBox() {
          window.location.href='/admin';
      };

      $('#search-box, #page').change(function () {
          var fastSelect = $('input:radio[name="fastSelect"]:checked').val();
          var keyWord = $('input:text[name="keyWord"]').val();
          var startEndKeyWord = $("input:radio[name='startEndKeyWord']:checked").val();
          var suffix = $("#domainSuffix option:selected").val();
          var buyType = $("input:radio[name='buyType']:checked").val();
          var PAGE = $("input:radio[name='PAGE']:checked").val();
          $.ajax({
              url: '/search',
              type: 'POST',
              data: {
                  'fastSelect': fastSelect,
                  'keyWord': keyWord,
                  'startEndKeyWord': startEndKeyWord,
                  'suffix': suffix,
                  'buyType': buyType,
                  'PAGE': PAGE
              },
              datatype: 'JSON',
              success: function (data, statusText, xmlHttpRequest) {
                  if (data != 'error') {
                      window.data;
                      document.getElementById('tableBody').innerHTML = '';
                      var all_info = eval('(' + data + ')');
                      var totlePage = all_info['totlePage'];
                      var nowPage = all_info['nowPage'];
                      var pageList = all_info['pageList']
                      info_dic = all_info['info']
                      for (var key in info_dic) {
                          var value = info_dic[key]
                          var id = value['id'];
                          var score = value['score'];
                          var length = value['length']
                          var price = value['price'];
                          var transcrtion_type = value['transcrtion_type'];
                          var tr = document.createElement('tr');
                          var td1 = document.createElement('td');
                          {
                              var td1_a = document.createElement('a')
                              td1_a.setAttribute('href', 'http://whois.stupig.com/?domain=' + key);
                              td1_a.innerText = key;
                              td1_a.setAttribute('target', '_blank');
                              td1.appendChild(td1_a);
                              tr.appendChild(td1);
                          };
                          var td2 = document.createElement('td');
                          {
                              td2.innerText = length;
                              tr.appendChild(td2);
                          };
                          var td3 = document.createElement('td');
                          {
                              td3.innerText = score;
                              tr.appendChild(td3);
                          };
                          var td4 = document.createElement('td');
                          {
                              if (transcrtion_type == '1') {
                                  td4.innerText = '一口价';
                              } else if (transcrtion_type == '0') {
                                  td4.innerText = '竞拍';
                              } else {
                                  td4.innerText = '待定';
                              };
                              tr.appendChild(td4);
                          };
                          var td5 = document.createElement('td');
                          {
                              td5.innerText = price;
                              tr.appendChild(td5);
                          };
                          var td6 = document.createElement('td');
                          {
                              var td6_a = document.createElement('a');
                              td6_a.innerText = '更多信息';
                              td6_a.setAttribute('href', '/detail-' + id + '.html');
                              td6.appendChild(td6_a);
                              tr.appendChild(td6);
                          };
                          var td7 = document.createElement('td');
                          {
                              if (status == '1') {
                                  td7.innerText = '已出售';
                              } else {
                                  td7.innerText = '未出售';
                              };
                              tr.appendChild(td7);
                          };
                          var td8 = document.createElement('td');{
                              var a1 = document.createElement('a');
                              var a2 = document.createElement('a');
                              var span = document.createElement('span');
                              span.innerText = '|';
                              a1.setAttribute('href', '/admin/modify?id='+id);
                              a1.innerText = '修改';
                              td8.appendChild(a1);
                              td8.appendChild(span);
                              a2.setAttribute('type','button');
                              a2.setAttribute('type','button');
                              a2.setAttribute('class','btn-link');
                              a2.setAttribute('data-toggle','modal');
                              a2.setAttribute('onclick','delFunc('+id+')');
                              a2.setAttribute('data-target','#DelModal');
                              a2.innerText = '删除';
                              td8.appendChild(a2);
                              tr.appendChild(td8);
                          };
                          document.getElementById('tableBody').appendChild(tr);
                          if (totlePage > 1) {
                              var ul = document.getElementById('PageUl');
                              ul.innerHTML = '';
                              var startLi = "<li><a aria-label='Previous'><label for='STARTPAGE' style='display: inline;' aria-hidden='true'>&laquo;" +
                                  "</label><input type='radio' id='STARTPAGE' name='PAGE' value='1' class='dispaly-none' /></a></li>"
                              ul.insertAdjacentHTML('beforeEnd', startLi);
                              for (var vl in pageList) {
                                  var li = document.createElement('li');
                                  var a = document.createElement('a');
                                  var label = document.createElement('label');
                                  var input = document.createElement('input');
                                  label.setAttribute('for', 'PAGE'+ String(pageList[vl]));
                                  label.setAttribute('class', 'display-inline');
                                  label.innerText = pageList[vl];
                                  a.appendChild(label);
                                  input.setAttribute('type', 'radio');
                                  input.setAttribute('name', 'PAGE');
                                  input.setAttribute('id', 'PAGE'+ String(pageList[vl]));
                                  input.setAttribute('class', 'radio-none');
                                  input.setAttribute('value', pageList[vl]);
                                  a.appendChild(input);
                                  li.appendChild(a);
                                  ul.append(li);
                                  if (nowPage == pageList[vl]) {
                                      li.setAttribute('class', 'active');
                                  };
                              };
                              var endLi = "<li><a aria-label='NEXT'><label for='ENDPAGE' style='display: inline;' aria-hidden='true'>&raquo;</label>" +
                                  "<input type='radio' id='ENDPAGE' name='PAGE' value='" + totlePage + "'class='dispaly-none'/></a></li>";
                              ul.insertAdjacentHTML('beforeEnd',endLi);
                          } else {
                              document.getElementById('page').innerHTML = '';
                          };
                      };
                  };
              }
          });
      });
  </script>
{% endblock %}
